<template>
  <el-dialog :model-value="dialogVisible" :title="dialogTitle" width="1580px" @close="handleClose">
    <!-- <div class="h">
  <div class="tit">数字化投资系统</div>
  </div> -->
    <div class="fle">

      <el-form :model="form" label-width="100px" class="project-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="项目经理" prop="projectEmpId">
              <el-select v-model.number="form.projectEmpId" placeholder="请选择项目经理">
                <el-option v-for="(label, value) in projectEmpIdOptions" :key="value" :label="label"
                  :value="Number(value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人" prop="projectLeader">
              <el-input v-model="form.projectLeader"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目状态分类" prop="statusCategory">
              <el-select v-model.number="form.statusCategory" placeholder="请选择项目状态">
                <el-option v-for="(label, value) in statusOptions" :key="value" :label="label" :value="Number(value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="投资金额" prop="investmentAmount" :rules="[
              // { required: true, message: 'EmpId is required' },
              { type: 'number', message: 'must be a number' },
            ]">
              <el-input v-model.number="form.investmentAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model.number="form.businessType" placeholder="请选择业务类型">
                <el-option v-for="(label, value) in businessOptions" :key="value" :label="label" :value="Number(value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法定代表人" prop="legalRepresentative">
              <el-input v-model="form.legalRepresentative"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="form.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类别" prop="industryCategory">
              <el-select v-model.number="form.industryCategory" placeholder="请选择行业类别">
                <el-option v-for="(label, value) in industryOptions" :key="value" :label="label" :value="Number(value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投资时间" prop="investmentDate" :rules="[{ message: 'must YYYY-MM-DD' }]">
              <el-input v-model="form.investmentDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目预警等级" prop="warningLevel">
              <el-select v-model.number="form.warningLevel" placeholder="请选择预警等级">
                <el-option v-for="(label, value) in warningLevelOptions" :key="value" :label="label"
                  :value="Number(value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="持股比例" prop="shareRatio" :rules="[
              // { required: true, message: 'EmpId is required' },
              { type: 'number', message: 'must be a number' },
            ]">
              <el-input v-model.number="form.shareRatio"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" v-model="form.remarks" :rows="4"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, watch } from 'vue';
import { ref } from 'vue'
import { onAdd, onChange, getManagerId } from '@/api/project/search'
import { ElMessage } from 'element-plus';
import { warn } from 'echarts/types/src/util/log.js';
import { onMounted } from 'vue'
const statusOptions = {
  0: '正常',
  1: '诉讼',
  2: '关注',
  3: '终止',
  4: '暂停'
}
const industryOptions = {
  0: '互联网',
  1: '金融',
  2: '制造',
  3: '人工智能',
}
const businessOptions = {
  0: '股权投资',
  1: '债权投资',
  2: '基金投资'
}
const warningLevelOptions = {
  0: '无',
  1: '轻微',
  2: '中等',
  3: '严重'
}

//经理
const projectEmpIdOptions = async () => {
  try {
    const res = await getManagerId()
    console.log(res)

    // 假设返回的数据格式为 {data: [{id: 1, name: '张三'}, {id: 2, name: '李四'}]}
    if (res && res.data) {
      const options: { [key: string]: string } = {}
      res.data.forEach((item: any) => {
        // 根据实际返回的数据结构调整
        options[item.id] = item.name || `项目经理${item.id}`
      })
      projectEmpIdOptions.value = options
    }
  } catch (error) {
    console.error('获取项目经理数据失败:', error)
    ElMessage.error('获取项目经理数据失败')
  }
}

// 在组件挂载时获取项目经理数据
onMounted(() => {
  projectEmpIdOptions()
})


// const dialogVisible=ref(false)
const form = ref({
  projectEmpId: '',/*数字*/
  projectLeader: '',
  statusCategory: null,/*数字*/
  investmentAmount: '',/*数字*/
  businessType: '',/*数字*/
  legalRepresentative: '',
  contact: '',
  industryCategory: '',/*数字*/
  investmentDate: '',
  projectName: '',
  warningLevel: '',
  shareRatio: '',/*数字*/
  remarks: ''

})



const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => { }
  }
})

watch(
  () => props.dialogTableValue,
  () => {
    console.log(props.dialogTableValue)
    form.value = props.dialogTableValue as {
      projectEmpId: '',/*数字*/
      projectLeader: '',
      statusCategory: '',/*数字*/
      investmentAmount: '',/*数字*/
      businessType: '',/*数字*/
      legalRepresentative: '',
      contact: '',
      industryCategory: '',/*数字*/
      investmentDate: '',
      projectName: '',
      warningLevel: '',
      shareRatio: '',/*数字*/
      remarks: ''
    }
  }, { deep: true, immediate: true })


const emits = defineEmits(['update:modelValue', 'initUserList'])

const handleClose = () => {
  emits('update:modelValue', false)
}
const handleConfirm = async () => {
  props.dialogTitle === '添加项目' ? await onAdd(form.value) : await onChange(form.value)
  console.log(form.value)
  ElMessage.success('成功')
  emits('initUserList')
  handleClose()
}




</script>

<style scoped>
.tit {
  width: 130px;
  height: 30px;
  font-size: 18px;
  text-align: center;
  justify-content: center;
  padding-top: 5px;
  color: #1A70AD;
  border-bottom: #1A70AD solid 3px;
}

.h {
  border-bottom: #E2E7F5 solid 1px;
  margin-bottom: 16px;
}

el-input {
  width: 267px;
  height: 50px;
  border: #E2E7F5 solid 1px;
  margin-left: 25px;
}

.i1 {
  width: 267px;
  height: 50px;
  border: #E2E7F5 solid 1px;
  margin-left: 5px;
}

.i2 {
  width: 230px;
  height: 50px;
  border: #E2E7F5 solid 1px;
  margin-left: 20px;
}

.fle {
  width: 1580px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.de {
  width: 400px;
  height: 50px;
  border-left: #1A70AD solid 5px;
  margin-bottom: 12px;
  font-size: 20px;
  /* margin-right: 30px; */
  padding-left: 5px;
}

.de1 {
  /* width: 739px; */
  border-left: #1A70AD solid 5px;
  font-size: 20px;
  display: flex;
  flex-direction: row;
}

textarea {
  width: 789px;
  height: 80px;
}

.i3 {
  width: 267px;
  height: 50px;
  border: #E2E7F5 solid 1px;
  margin-left: 45px;
}


:deep(.el-form-item) {
  width: 500px
}
</style>